<!DOCTYPE html>
<html>
<head>
    <style>
        .calculator {
            width: 400px;
            height: 500px;
            margin: 0 auto;
            text-align: center;
            background-color: lightgray;
            padding: 20px;
        }

        input[type="text"] {
            width: 100%;
            height: 50px;
            font-size: 20px;
            text-align: right;
            margin-bottom: 20px;
        }

        input[type="button"] {
            width: 70px;
            height: 70px;
            font-size: 20px;
            margin-right: 10px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
<div class="calculator">
    <input type="text" id="expression" disabled/>
    <br/>
    <input type="button" value="1" onclick="document.getElementById('expression').value+='1'"/>
    <input type="button" value="2" onclick="document.getElementById('expression').value+='2'"/>
    <input type="button" value="3" onclick="document.getElementById('expression').value+='3'"/>
    <input type="button" value="+" onclick="document.getElementById('expression').value+='+'"/>
    <br/>
    <input type="button" value="4" onclick="document.getElementById('expression').value+='4'"/>
    <input type="button" value="5" onclick="document.getElementById('expression').value+='5'"/>
    <input type="button" value="6" onclick="document.getElementById('expression').value+='6'"/>
    <input type="button" value="-" onclick="document.getElementById('expression').value+='-'"/>
    <br/>
    <input type="button" value="7" onclick="document.getElementById('expression').value+='7'"/>
    <input type="button" value="8" onclick="document.getElementById('expression').value+='8'"/>
    <input type="button" value="9" onclick="document.getElementById('expression').value+='9'"/>
    <input type="button" value="*" onclick="document.getElementById('expression').value+='*'"/>
    <br/>
    <input type="button" value="C" onclick="document.getElementById('expression').value=''"/>
    <input type="button" value="0" onclick="document.getElementById('expression').value+='0'"/>
    <input type="button" value="="
           onclick="document.getElementById('expression').value=eval(document.getElementById('expression').value)"/>
    <input type="button" value="/" onclick="document.getElementById('expression').value+='/'"/>
</div>
</body>
</html>






